<template>
    <div class="modify-score">
        <!-- 查询学生 -->
        <header class="modify-header">
            <div class="left">
                <span class="arrow" @click="$router.back()"><i class="el-icon-arrow-left" />返回</span>
                <span>|</span>
                <span>课程成绩</span>
            </div>
            <div class="right">
                课程管理系统
            </div>
        </header>
        <main class="modify-main">
            <div class="query-container">
                <!-- 开发中。。。。。。 -->
                <!-- <el-button type="primary" style="margin-left: 15px; display: inline-block;" @click="addHandle()">
                    + 新建学生成绩
                </el-button> -->
            </div>
            <!-- 成绩表 -->
            <div class="score-table-container">
                <el-table :data="tableData" stripe class="data_table">
                    <el-table-column prop="id" label="成绩单编号">
                    </el-table-column>
                    <el-table-column prop="students.className" label="班级名称">
                    </el-table-column>
                    <el-table-column prop="students.studentName" label="学生名称">
                    </el-table-column>
                    <el-table-column prop="attendanceScore" label="平时分">
                    </el-table-column>
                    <el-table-column prop="assignmentScore" label="作业分">
                    </el-table-column>
                    <el-table-column prop="examScore" label="小组分">
                    </el-table-column>
                    <el-table-column prop="totalScore" label="总分">
                        <template slot-scope="scope">
                            <span :style="{ color: scope.row.totalScore < 60 ? 'red' : 'black' }">
                                {{ scope.row.totalScore }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="150px" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" class="blueBug"
                                @click="editHandle(scope.row.courseId, scope.row.studentId)">
                                编辑
                            </el-button>
                            <el-button type="text" size="small" class="delBut" @click="deleteHandle(scope.row.id)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </main>
    </div>
</template>

<script>
import { getCourseRecordsAPI, getSudentCourseRecordAPI, deleteSudentCourseRecordAPI } from '@/api/score'

export default {
    name: 'timeTable',
    data() {
        return {
            courseId: '',
            tableData: [],
            total: 0,
            params: {
                page: 1,
                pageSize: 10
            },
            form: {
                name: ''
            },
            input: ''
        }
    },
    created() {
        this.getCourseId()
        // this.fetchData()
    },
    mounted() {
        this.getCourseRecords()
    },
    methods: {
        //接收跳转传来的课程Id
        getCourseId() {
            // console.log(this.$route.query.courseId);
            this.courseId = this.$route.query.courseId
        },
        //获取该课程所包含的所有成绩单
        async getCourseRecords() {
            getCourseRecordsAPI(this.courseId).then(res => {
                // console.log(res.data);
                this.tableData = res.data
            })
        },
        //搜索学生姓名
        getRecordByStudentNameAndCourseId() {
            //获取学生Id
            // let currenSudentId = 
        },
        //新增学生
        addHandle() {
            this.$router.push({ path: '/course/gradeRecords/gradeRecorsd/addStudent',query:{courseId: this.courseId} });
        },
        //编辑按钮
        editHandle(courseId, studentId) {
            this.$router.push({ path: '/course/gradeRecords/getByCourseId/edit', query: { courseId: courseId, studentId: studentId } });
            // console.log('跳转编辑页面' + courseId, studentId);
        },
        //删除按钮
        deleteHandle(gradeRecordId) {
            this.$confirm('确认删除该学生, 是否继续?', '学生关于此门课程的信息被一并删除。确定删除？', {
                confirmButtonText: '删除',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 确认删除的操作
                deleteSudentCourseRecordAPI(gradeRecordId).then((res) => {
                    if (res.code === 200) {
                        this.$message.success(res.message)
                        this.getCourseRecords()
                    } else {
                        // 如果响应代码不是 200，表示操作失败
                        this.$message.error(res.message || '删除失败'); // 显示错误消息
                    }
                }).catch((error) => {
                    // 处理请求过程中发生的错误
                    this.$message.error('请求失败，请稍后再试');
                })
            }).catch(() => {
                // 用户点击取消或关闭弹窗的操作
                this.getCourseRecords()
            });
        }

    }
}
</script>

<style lang="scss" scoped>
//主容器
.timetable-containe {
    position: relative;
}

//成绩表
.score-table-container {
    margin-top: 50px;
    margin-right: 10px;
    margin-bottom: 50px;
    margin-left: 10px;

}

//查询框
.query-container {
    position: absolute;
    right: 230px;
}

.modify-score {
    background-color: #f4f6f8;
    height: 100vh;

    .modify-header {
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
        height: 64px;
        line-height: 64px;
        font-size: 16px;
        font-weight: bold;
        background-color: #fff;

        .left {
            span {
                margin-right: 4px;
            }

            .arrow {
                cursor: pointer;
            }
        }

        .right {
            text-align: right;
        }
    }

    .modify-main {
        background: #f4f6f8;
        padding: 20px 130px;

        .form-container {
            background-color: #fff;
            padding-left: 300px;
            padding-right: 300px;
            padding-bottom: 100px;

            .title {
                height: 60px;
                line-height: 60px;
                padding-left: 20px;
            }

            .form {
                margin-bottom: 20px;
                padding: 20px 65px 24px;

                .el-form {
                    display: flex;
                    flex-wrap: wrap;

                    .el-form-item {
                        width: 50%;
                    }
                }
            }
        }
    }

    .modify-footer {
        position: fixed;
        bottom: 10px;
        width: 100%;
        padding: 30px 50px;
        color: #000000d9;
        font-size: 18px;
        background: #fff;
        text-align: center;
    }

}
</style>
